<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jquery.js"></script>
  </head>
  <body>
    <!-- <div class="container">
        <div class="box" id="myid">1111</div>
    </div> -->
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <div class="mydiv">123</div>
    <script>
      // 原生1 先选择节点   2.操作节点；
      // var boxEle = document.querySelector(".box");
      // boxEle.onclick = function(){
      //     console.log(1111);
      // }

      // jq里的选择器
      // 1.类名选择器
      // $('.box').click(function(){
      //     console.log(1111);
      // })
      // 2.id选择器
      // $("#myid").click(function(){
      //     console.log(111);
      // })
      // 2.标签选择器
      // $("div").click(function(){
      //     console.log(111);
      // })

      // 3.后代选择器
      // $(".container .box").click(function(){
      //     console.log(1111);
      // })

      // 4.选取多个元素里奇数的元素
      //   $("ul li:even").click(function () {
      //     console.log("奇数"); //判断数字的序号为奇数
      //   });
      // 5.选取多个元素里的偶数元素
      //   $("ul li:odd").click(function () {
      //     console.log(11111); //判断数字的序号为偶数
      //   });
      // 6.可以选取多个类名或者标签名，id名；
      // $("li,.mydiv").click(function(){
      //     console.log("点击了");
      // })
      // 7.可以选取指定的元素 eq();
      // $("li:eq(1)").click(function(){
      //     console.log(1111);
      // })
      // 8.选取第一个元素
      // $("li:first").click(function(){
      //     console.log("点击了");
      // })

      // 9.获取最后一个元素
      //   $("li:last").click(function () {
      //     console.log("点击了");
      //   });
    </script>
  </body>
</html>
